<template>
  <div class="article" @click="toArticle(id)">
    <div class="title">{{ title }}</div>
    <ul class="imgs">
      <li v-for="(apic,index) in pictures" :key="'ap'+index" class="cell">
        <img class="img" v-lazy="apic + pictureSize" />
      </li>
    </ul>
    <div class="content">
      <div class="summary">{{ summary }}</div>
      <div class="count">{{ view | formatNumber }}阅读</div>
    </div>
  </div>
</template>

<script>
import { formatNumber } from '@/filters/filters.js'
export default {
  name: 'PostArticle',
  props: {
    id: {
      type: [Number, String]
    },
    title: {
      type: String
    },
    pictures: {
      type: Array
    },
    pictureSize: {
      type: String,
      default: '@702w_206h_1c'
    },
    summary: {
      type: String
    },
    view: {
      type: Number
    }
  },
  filters: {
    formatNumber
  },
  methods: {
    toArticle (id) {
      this.$router.push({ name: 'article', params: { id } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .article{
    margin: {
      left: 10px;
      right: 10px;
      bottom: 10px;
    }
    background-color: $color-white;
    @include border1px(#e7e7e7, 1px, 4px);
    .title{
      font-size: 15px;
      padding: 10px 10px 8px;
    }
    .imgs{
      display: flex;
      height: 103px;
      overflow: hidden;
      .cell{
        flex: 1 1 30%;
          @include cover(702, 206);
        background: {
          color: $color-grey;
          size: 36%;
          image: url('~@/assets/placeholder.png');
          repeat: no-repeat;
          position: 50%;
        }
      }
    }
    .content {
      text-align: justify;
      padding: 8px 10px 10px;
    }
    .summary{
      font-size: 13px;
      color: $color-text-regular;
      @include max-lines(2);
    }
    .count{
      margin-top: 8px;
      font-size: 12px;
      color: $color-text-secondary;
    }
  }
</style>
